<template>
  <div class="container">
    <Breadcrumb :items="['menu.tools', 'menu.tools.testForm']" />
    <a-form ref="formRef" layout="vertical" :model="formData">
      <a-space direction="vertical" :size="16">
        <a-card class="general-card">
          <template #title>
            标题
          </template>
          <a-row :gutter="80">
            <a-col :span="8">
              <a-form-item label="Select1" field="video.mode">
                <a-select placeholder="模式1">
                  <a-option value="custom">自定义</a-option>
                  <a-option value="1">模式1</a-option>
                  <a-option value="2">模式2</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="Input" field="video.acquisition.frameRate">
                <a-input placeholder="输入范围">
                  <template #append>KB</template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="Input" field="video.acquisition.frameRate">
                <a-input placeholder="输入范围"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="周选择器" field="">
                <a-week-picker/>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="带时间的日期选择" field="">
                <a-date-picker show-time format="YYYY-MM-DD HH:mm:ss"/>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="定制预设范围位置" field="">
                <a-date-picker
                  shortcuts-position="left"
                  :shortcuts="shortcuts"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="文件" field="files">
                <a-button size="mini" @click="fileUpload()">上传图片</a-button>
                <template #extra>
                  <div>每张图片大小不超过 500 KB，jpg、png格式。</div>
                </template>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item field="latitude" label="">
                <a-input v-model="formData.details" id="mapKeyword" placeholder="请输入请输入详细地址" />
              </a-form-item>
              <a-form-item field="" label="">
                <AmapMap keyword-id="mapKeyword" :address-detail="{longitude: formData.longitude, latitude: formData.latitude}" @mapCallback="mapCallback"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card class="general-card" :bordered="false">
          <template #title>
            说明
          </template>
          <a-form-item label="参数说明" field="audio.approvers">
            <a-textarea placeholder="请填写参数说明，最多不超多200字。"/>
          </a-form-item>
        </a-card>
      </a-space>
      <div class="actions">
        <a-space>
          <a-button>重置</a-button>
          <a-button type="primary" :loading="loading" @click="onSubmitClick">提交</a-button>
        </a-space>
      </div>
    </a-form>

    <a-modal
      v-model:visible="fileDialogVisible"
      :title="fileDialogTitle"
      :modal-style="{ width: '80%', height: '80%' }"
      :body-style="{ height: 'calc(100% - 108px)', overflow: 'auto' }"
      :mask-closable="false"
      :footer="false"
    >
      <file-manage file-type="image" @fileCancelCallback="fileCancelCBK" @fileOkCallback="fileOkCBK" />
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import dayjs from 'dayjs';

  import useLoading from '@/hooks/loading';
  import FileManage from '@/views/components/file.vue';
  import AmapMap from '@/components/map/amap.vue';

  const { loading, setLoading } = useLoading();

  const formData = ref<any>({});
  const formRef = ref<FormInstance>();
  const shortcuts = [
    {
      label: '昨天',
      value: () => dayjs().subtract(1, 'day')
    },
    {
      label: '今天',
      value: () => dayjs(),
    },
    {
      label: '一周后',
      value: () => dayjs().add(1, 'week'),
    },
    {
      label: '一个月后',
      value: () => dayjs().add(1, 'month'),
    },
    {
      label: '两个月后',
      value: () => dayjs().add(2, 'month'),
    }
  ];

  const fileDialogVisible = ref(false);
  const fileDialogTitle = ref('上传文件');

  const onSubmitClick = async () => {
    const res = await formRef.value?.validate();
    if (!res) {
      setLoading(true);
    }
    setTimeout(() => {
      setLoading(false);
    }, 1000);
  };

  const fileUpload = () => {
    fileDialogVisible.value = true;
  };
  const fileCancelCBK = () => {
    fileDialogVisible.value = false;
  };
  const fileOkCBK = (fileList: any) => {
    fileDialogVisible.value = false;
  };

  // 地图回调
  const mapCallback = (address: any) => {
    console.log(address);
  }


</script>

<script lang="ts">
  export default {
    name: 'TestForm',
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 40px 20px;
    overflow: hidden;
  }

  .actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    padding: 14px 20px 14px 0;
    background: var(--color-bg-2);
    text-align: right;
  }
</style>
